<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessica wasm + canvas auto play demo</title>
    <link rel="stylesheet" href="./demo.css">
    <script src="./vconsole.js"></script>
    <script src="./js/jessibuca-pro-demo.js"></script>
    <style>
        .container-shell:before {
            content: "jessibuca wasm + canvas  auto player demo";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
                <span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
                <span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
                <span id="mseNotSupport"
                      style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wasmSupport" style="color: green;display: none">支持WASM解码；</span>
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码</span>
                <span id="wasmNotSupport" style="color: red;display: none">不支持WASM解码</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码</span>
            </div>
        </div>

        <div class="input">
            iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互
            <br>
            操作来恢复，不能使用代码。
            <br>
            https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
        </div>
        <div class="input">
            <div>
                如果是通过点击链接、脚本操作等方式加载页面，可以通过js程序去掉静音（地址栏输入貌似不支持js解除禁音）。
                <br>
                <span style="color:green">目前demo 借助performance.navigation.type 判断是否满足加载声音的条件。来实现自动播放(带声音)。</span>
                <br>
                <span style="color:blueviolet">TIPS:“重新加载”按钮或者location.reload()方法加载,通过“前进”或“后退”按钮加载 这种是不会带有声音播放的</span>
            </div>
        </div>
        <div class="input">
            <div>
                <span>自动播放是默认静音的，需要手动触发cancelMute()</span>
                <br>
                <span style="color:red">我绑定了container窗口的点击事件，来激活声音。</span>
            </div>
        </div>
        <div class="input">
            <button onclick="destroy()">销毁</button>
        </div>
    </div>
</div>

<script src="./demo.js"></script>
<script>
    var $container = document.getElementById('container');

    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    function create() {
        jessibuca = new JessibucaPro({
            container: $container,
            loadingText: "加载中",
            decoder: './js/decoder-pro.js',
            debug: true,
            debugLevel: "debug",
            useMSE: true,
            useSIMD: true,
            useWCS: true,
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                ptz: showOperateBtns,
                quality: showOperateBtns,
                performance: showOperateBtns,
            },
            heartTimeoutReplayUseLastFrameShow: true,
            audioEngine: "worklet",
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            heartTimeout: 10,
        },);
        jessibuca.on(JessibucaPro.EVENTS.playFailedAndPaused, (error) => {
            jessibuca.showErrorMessageTips('播放异常：' + error);
        })

        jessibuca.on(JessibucaPro.EVENTS.crashLog, (log) => {
            console.error('crashLog', log)
        })

        jessibuca.on('ptz', (arrow) => {
            // console.log('ptz', arrow);
        })

        jessibuca.on('streamQualityChange', (value) => {
            console.log('streamQualityChange', value);
        })

        jessibuca.on('timeUpdate', (value) => {
            // console.log('timeUpdate', value);
        })

        jessibuca.on('stats', (stats) => {
            // console.log('stats', stats);
        })

        jessibuca.on('start', () => {
            /**
             * 0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE。
             * 1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。
             * 2：网页通过“前进”或“后退”按钮加载，相当于常数performance.navigation.TYPE_BACK_FORWARD。
             * 255：任何其他来源的加载，相当于常数performance.navigation.TYPE_RESERVED。
             */
            if (performance.navigation.type === 0) {
                jessibuca.cancelMute();
                console.log('volume',jessibuca.getVolume());
            }
        })

    }


    create();

    function play() {
        jessibuca.play('https://live.nodemedia.cn:8443/live/b480_264.flv');
    }

    play();

    $container.addEventListener('click', function () {
        jessibuca.cancelMute()
    }, false)


    function destroy() {
        if (jessibuca) {
            jessibuca.destroy();
        }
    }
</script>

</body>
</html>
